<template>
  <div
    class="login"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-row type="flex" justify="center" class="animated bounceInDown">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="headTitle">
          <div class="img"></div>
          <div class="title">合作伙伴</div>
        </div>
        <!-- 这个是用户名输入框 -->
        <el-form-item style="width: 300px" label="账号">
          <el-input v-model="form.userName" clearable></el-input>
        </el-form-item>
        <!-- 这个是密码输入框 -->
        <el-form-item style="width: 300px" label="密码">
          <el-input
            type="password"
            v-model="form.password"
            @keyup.enter.native="handleLogin"
            clearable
          ></el-input>
        </el-form-item>
        <div class="btn">
          <el-button type="primary" @click="handleLogin" style>登录</el-button>
        </div>
      </el-form>
    </el-row>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
// import { mapGetters } from "vuex"; //注册state
import $ from "jquery";
export default {
  data() {
    return {
      loading: false,
      // 登录表单数据
      form: {
        userName: "",
        password: ""
      }
    };
  },
  methods: {
    // 登录的方法
    handleLogin() {
      this.loading = true;
      // 当前时间戳，精确到秒
      const timestamp = Date.parse(new Date())
        .toString()
        .substr(0, 10);
      // 随机六位数字
      const nonce = Math.random()
        .toString()
        .slice(-6);
      // 创建一个空数组
      var dataArr = [];
      // 登录
      dataArr[0] = this.$md5(this.form.password);
      dataArr[1] = timestamp;
      dataArr[2] = nonce;
      // 对数组进行排序
      dataArr.sort();
      // 将数组转化为字符串，join("") 把数组用空字符串连接成字符串
      const dataStr = dataArr.join("").toUpperCase();
      // 签名算法
      const signature = this.$md5(dataStr);
      // 用户名
      const userName = this.form.userName;
      // 将携带的数据转化微json格式
      const data = JSON.stringify({
        signature,
        timestamp,
        nonce,
        userName
      });
      // 发送请求
      this.$api.login(data).then(res => {
        this.loading = false;
        const { succeed, values } = res;
        // console.log(res);
        // 判断登录
        if (succeed) {
          // 获取到token
          const myToken = values.access_token;
          // 将令牌存起来
          sessionStorage.setItem("myToken", myToken);
          // 获取到权限
          const { usertype, sv_d_role_config } = values;
          // 将权限存起来
          this.$store.state.usertype = usertype;
          sessionStorage.setItem("role_config", sv_d_role_config);
          // 跳转到后台页面
          this.$router.push({
            path: "/admin",
            query: {
              y: 1
            }
          });
          // 登录成功提示
          this.$message({
            showClose: true,
            message: "欢迎回来",
            type: "success"
          });
        } else if (!succeed) {
          // 登录失败提示
          this.$message.error("账号或密码错误");
        }
      });
    },
    // 重置按钮
    handleReset() {
      this.form = {
        userName: "",
        password: ""
      };
    }
  },
  // 背景特效
  mounted() {
    this.particle = this.utils.particle();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.login {
  padding-top: 200px;
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 50;
  .headTitle {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    .img {
      background: url("../assets/logo.png") no-repeat;
      background-size: 120px 50px;
      height: 50px;
      width: 120px;
    }
    .title {
      font-size: 30px;
      color: #6e6e6e;
      margin-top: 20px;
    }
  }
  .btn {
    text-align: center;
    margin-top: 70px;
  }
  #canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #000;
    z-index: -5;
  }
}
.login @{deep} .el-row--flex.is-justify-center {
  width: 420px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  height: 400px;
  .el-form {
    margin-top: 50px;
  }
  // 表单的一整项
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
  }
  // 表单的标题
  .el-form-item__label {
    font-size: 20px;
    color: rgb(160, 160, 160);
  }
  // 表单的输入框
  .el-input {
    border: none;
    color: rgb(160, 160, 160);
  }
  // 表单的输入内容区域
  .el-input__inner {
    background-color: inherit;
    border: none;
    color: rgb(160, 160, 160);
  }
  .el-button--primary {
    padding: 12px 130px;
    background: #0094ff;
    border: none;
    font-size: 20px;
    border-radius: 20px;
  }
  .btn .el-button:focus,
  .btn .el-button:hover {
    color: #409eff;
    background-color: rgba(255, 255, 255, 0.3);
  }
}
</style>